<template>
  <div class="header">
    <div class="header-title">
      <span class="iconfont icon">&#xe68f;</span>
      <span>{{titles}}</span>
    </div>
    <router-link to='/chrome'>
      <div class="chrome">
        <img class="icon-img" src="@/assets/images/chrome.png" />
      </div>
    </router-link>
    <router-link to='/firefox'>
    <div class="firefox">
      <img class="icon-img" src="@/assets/images/firefox.png" />
    </div>
    </router-link>
    <router-link to='/ie'>
    <div class="ie">
      <img class="icon-img" src="@/assets/images/ie.png" />
    </div>
    </router-link>
    <div class="header-time">
      <span class="iconfont icons">&#xe874;</span>{{hours}}{{minutes}}{{seconds}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    titles: String
  },
  data () {
    return {
      hours: '',
      minutes: '',
      seconds: ''
    }
  },
  created () {
    setInterval(() => {
      let date = new Date()
      let hours = date.getHours()
      let minutes = date.getMinutes()
      let seconds = date.getSeconds()
      if (date.getHours() >= 10) {
        this.hours = hours + ':'
      } else {
        this.hours = '0' + hours + ':'
      }
      if (date.getMinutes() >= 10) {
        this.minutes = minutes + ':'
      } else {
        this.minutes = '0' + minutes + ':'
      }
      if (date.getSeconds() >= 10) {
        this.seconds = seconds
      } else {
        this.seconds = '0' + seconds
      }
    }, 30)
  }
}
</script>

<style lang="stylus" scoped>
  .header
    position: fixed
    top: 0
    z-index: 9999
    display: flex
    width: 100%
    height: 3.5rem
    line-height: 3.5rem
    background: linear-gradient(left, black, #0f3);
    color: #FFFFFF
    text-align: center
    .header-title
      flex: 0.57
      font-size: 1.5rem
      font-family: Georgia, serif
      text-align: center
      .icon
        font-size: 1.5rem
        text-align: center
        padding: 0 0.2rem 0.2rem 0
    .chrome,.firefox,.ie
      flex: 0.1
      padding: 0.3rem 0.5rem 0 0.5rem
      .icon-img
        width: 3rem
        height: 3rem
    .header-time
      flex: 0.5
      font-size: 1.5rem
      padding: 0 0 0 5rem
      .icons
        font-size: 1.5rem
        margin: 0 0.5rem 0 4.5rem
</style>
